<!-- <div appBsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal"
     aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()">

                <div class="modal-header">
                    <h5 class="modal-title">
                        <span *ngIf="organizationUnit.id">{{"Edit" | localize}}: {{organizationUnit.displayName}}</span>
                        <span *ngIf="!organizationUnit.id">{{"NewOrganizationUnit" | localize}}</span>
                    </h5>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>

                <div class="modal-body">

                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <label for="OrganizationUnitDisplayName">{{"Name" | localize}} *</label>
                        <input id="OrganizationUnitDisplayName" #organizationUnitDisplayName="ngModel" class="form-control" type="text" name="displayName" [ngClass]="{'edited': organizationUnit.displayName}" [(ngModel)]="organizationUnit.displayName" required maxlength="128">
                        <validation-messages [formCtrl]="organizationUnitDisplayName"></validation-messages>
                    </div>

                </div>

                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-light-primary font-weight-bold" (click)="close()">{{"Cancel" | localize}}</button>
                    <button type="submit" class="btn btn-primary font-weight-bold" [disabled]="!editForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
                </div>

            </form>

        </div>
    </div>
</div> -->
<div appBsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()">

                <div class="modal-header">
                    <h5 class="modal-title">
                        <span *ngIf="organizationUnit.id">{{"Edit" | localize}}: {{organizationUnit.displayName}}</span>
                        <span *ngIf="!organizationUnit.id">{{"NewOrganizationUnit" | localize}}</span>
                    </h5>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>


                <!-- V3 -->
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-6">
                            <label>{{l("Name")}} *</label>
                            <input #organizationUnitDisplayName="ngModel" class="form-control" type="text" name="displayName" [ngClass]="{'edited': organizationUnit.displayName}" [(ngModel)]="organizationUnit.displayName" required maxlength="128">
                            <validation-messages [formCtrl]="organizationUnitDisplayName"></validation-messages>
                        </div>


                        <div class="form-group col-6">
                            <label>{{l("type")}} </label>
                            <select [(ngModel)]="organizationUnit.organizationUnitTypeId" name="organizationUnitTypeId" class="form-control">
                                <option value="">{{l('unknown')}}</option>
                                <option [value]="outype.value" *ngFor="let outype of outypeList">{{outype.name}}</option>
                            </select>
                        </div>


                        <div class="form-group col-6" *ngIf="isStore">
                            <label class="control-label" for="shutdownTime">{{l('openingTime')}}</label>
                            <input class="form-control" [(ngModel)]="openingTime" id="openingTime" name="openingTime" [placeholder]="l('openingTime')" type="time">
                        </div>
                        <div class="form-group col-6" *ngIf="isStore">
                            <label class="control-label" for="shutdownTime">{{l('closedTime')}}</label>
                            <input class="form-control" [(ngModel)]="closedTime" id="closedTime" name="closedTime" [placeholder]="l('closedTime')" type="time">
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("outerId")}} </label>
                            <input #organizationUnitOuterId="ngModel" class="form-control" type="text" name="outerId" [(ngModel)]="organizationUnit.outerId">
                            <validation-messages [formCtrl]="organizationUnitOuterId"></validation-messages>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("qrCodeExtraInfo")}} </label>
                            <input #organizationUnitQrCodeExtraInfo="ngModel" class="form-control" type="text" name="qrCodeExtraInfo" [(ngModel)]="organizationUnit.qrCodeExtraInfo">
                            <validation-messages [formCtrl]="organizationUnitQrCodeExtraInfo"></validation-messages>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("webAddressUrl")}} </label>
                            <input #organizationUnitWebAddressUrl="ngModel" class="form-control" type="text" name="webAddressUrl" [(ngModel)]="organizationUnit.webAddressUrl">
                            <validation-messages [formCtrl]="organizationUnitWebAddressUrl"></validation-messages>
                        </div>

                        <div class="form-group col-6">
                            <label>{{l("taobaoStoreId")}} </label>
                            <input #organizationUnittaobaoStoreId="ngModel" class="form-control" type="text" name="taobaoStoreId" [(ngModel)]="organizationUnit.taobaoStoreId">
                            <validation-messages [formCtrl]="organizationUnittaobaoStoreId"></validation-messages>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("contact")}} </label>
                            <input #organizationUnitContact="ngModel" class="form-control" type="text" name="contact" [(ngModel)]="organizationUnit.contact">
                            <validation-messages [formCtrl]="organizationUnitContact"></validation-messages>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("bizType")}} </label>
                            <input #organizationUnitbizType="ngModel" class="form-control" type="text" name="bizType" [(ngModel)]="organizationUnit.bizType">
                            <validation-messages [formCtrl]="organizationUnitbizType"></validation-messages>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("categoryId")}} </label>
                            <input #organizationUnitcategoryId="ngModel" class="form-control" type="text" name="categoryId" [(ngModel)]="organizationUnit.categoryId">
                            <validation-messages [formCtrl]="organizationUnitcategoryId"></validation-messages>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("defaultOnlineShopName")}} </label>
                            <input #organizationUnitdefaultOnlineShopName="ngModel" class="form-control" type="text" name="defaultOnlineShopName" [(ngModel)]="organizationUnit.defaultOnlineShopName">
                            <validation-messages [formCtrl]="organizationUnitdefaultOnlineShopName"></validation-messages>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("area")}} </label>
                            <app-my-address [(position)]="organizationUnit.position"></app-my-address>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("addressDetail")}} </label>
                            <div class="input-group">
                                <input class="form-control" type="text" name="addressDetail" (keydown.enter)="showMap($event)" [(ngModel)]="organizationUnit.position.location">
                                <span class="input-group-btn">
                                    <button (click)="showMap()" class="btn btn-primary" type="button">
                                        <i class="icon-address"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <div class="form-group col-12">
                            <app-my-map (afterInit)="getPointer($event)" (mapClick)="mapClick($event)" #map [address]="[organizationUnit.position]"></app-my-map>
                        </div>
                        <div class="form-group col-6">
                            <label>{{l("qrcodeRules")}} </label>
                            <input #organizationUnitqrcodeRules="ngModel" class="form-control" type="text" name="qrcodeRules" [(ngModel)]="organizationUnit.qrcodeRules">
                            <validation-messages [formCtrl]="organizationUnitqrcodeRules"></validation-messages>
                        </div>

                        <div class="form-group col-6" *ngIf="isStore">
                            <label>{{l("StoreInfo")}} </label>
                            <input class="form-control" type="text" name="storeDevicesInfo" [(ngModel)]="organizationUnit.storeDevicesInfo">
                        </div>

                        <div class="form-group col-12">
                            <a class="btn btn-default" (click)="checkBoxShow=!checkBoxShow">{{l('showHidden')}}</a>
                        </div>
                        <div class="checkbox-list form-group  col-12" *ngIf="checkBoxShow">
                            <div class="row" style="padding-left: 20px;">
                                <div class="col-3">
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isNeedThingApprove" name="isNeedThingApprove">
                                        {{l("isNeedThingApprove")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isNeedDeviceApprove" name="isNeedDeviceApprove">
                                        {{l("isNeedDeviceApprove")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isNeedAdsApprove" name="isNeedAdsApprove">
                                        {{l("isNeedAdsApprove")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isNeedAppApprove" name="isNeedAppApprove">
                                        {{l("isNeedAppApprove")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isNeedCouponApprove" name="isNeedCouponApprove">
                                        {{l("isNeedCouponApprove")}}
                                        <span></span>
                                    </label>

                                </div>
                                <div class="col-3">
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isCouponAutoSendDown" name="isCouponAutoSendDown">
                                        {{l("isCouponAutoSendDown")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isAdsAutoSendDown" name="isAdsAutoSendDown">
                                        {{l("isAdsAutoSendDown")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isAppAutoSendDown" name="isAppAutoSendDown">
                                        {{l("isAppAutoSendDown")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.isProductAutoSendDown" name="isProductAutoSendDown"> {{l("isProductAutoSendDown")}}
                                        <span></span>
                                    </label>
                                </div>
                                <div class="col-3">
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.canAcceptCouponAutoSendDown" name="canAcceptCouponAutoSendDown"> {{l("canAcceptCouponAutoSendDown")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.canAcceptAdsAutoSendDown" name="canAcceptAdsAutoSendDown"> {{l("canAcceptAdsAutoSendDown")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.canAcceptAppAutoSendDown" name="canAcceptAppAutoSendDown"> {{l("canAcceptAppAutoSendDown")}}
                                        <span></span>
                                    </label>
                                    <label class="checkbox checkbox-success">
                                        <input type="checkbox" [(ngModel)]="organizationUnit.canAcceptProductAutoSendDown" name="canAcceptProductAutoSendDown"> {{l("canAcceptProductAutoSendDown")}}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-light-primary font-weight-bold" (click)="close()">{{"Cancel" | localize}}</button>
                    <button type="submit" class="btn btn-primary font-weight-bold" [disabled]="!editForm.form.valid" [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
                </div>

            </form>

        </div>
    </div>
</div>